<template>
  <div class="head">
    <div class="left">
      <i :class="obj" @click="change"></i>
      <el-breadcrumb id="cont" separator-class="el-icon-arrow-right">
        <span :class="{sty: !arrstate}">
          <el-breadcrumb-item :class="{arrow: arrstate}" to="/">首页</el-breadcrumb-item>
        </span>
        <transition-group name="crumbs">
          <el-breadcrumb-item
            v-for="item of routes"
            :key="item.path"
            :to="item.path"
          >{{ item.meta.name }}</el-breadcrumb-item>
        </transition-group>
      </el-breadcrumb>
    </div>
    <div class="right">
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          <i class="el-icon-user-solid"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
          <el-dropdown-item icon="el-icon-menu" @click.native="$router.push('/')">首页</el-dropdown-item>
          <el-dropdown-item icon="el-icon-close" @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    state: Boolean
  },
  data() {
    return {
      arrstate: true
    };
  },
  computed: {
    obj() {
      return {
        icon: true,
        "el-icon-s-fold": !this.state,
        "el-icon-s-unfold": this.state
      };
    },
    routes() {
      let obj = this.$route.matched;
      let newArr = [];
      obj.forEach(item => {
        if (item.meta.name) {
          newArr.push(item);
        }
      });
      newArr.forEach((item, index) => {
        if (item.meta.name === "首页") {
          newArr.splice(index, 1);
          this.arrstate = true;
        } else {
          this.arrstate = false;
        }
      });
      return newArr;
    }
  },
  methods: {
    change() {
      this.$emit("click");
    },
    loginOut() {
      this.$confirm("此操作将退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      })
        .then(() => {
          this.$cookie.remove("login_tk")
          this.$store.commit("removeCookie")
          this.$store.commit("removeuser")
          this.$router.push("/login")
          this.$message({
            type: "success",
            message: "退出成功，请重新登陆！"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    }
  }
};
</script>

<style>
.crumbs-enter-active,
.crumbs-leave-active {
  transition: all 0.5s;
}

.crumbs-enter,
.crumbs-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.crumbs-move {
  transition: all 0.5s;
}

.crumbs-leave-active {
  position: absolute;
}
.el-breadcrumb > :last-child > :last-child > :last-child {
  display: none;
}
</style>

<style lang="sass">
.head
  width: 100%
  display: flex
  justify-content: space-between
  align-items: center
  .left
    display: flex
    justify-content: space-between
    align-items: center
.icon
  font-size: 30px
  color: cadetblue
  cursor: pointer
  margin-right: 10px
.el-breadcrumb__item:last-child
  .el-breadcrumb__inner 
    a
      font-weight: blod
      font-size: 20
      cursor: pointer
.el-breadcrumb__item:last-child 
  .el-breadcrumb__separator
    display: inline-block
#cont
  .sty
    span
      span
        font-weight: 700
        cursor: pointer
        color: #000
  .arrow
    i
      display: none
.right
  cursor: pointer
  margin: 0 20px
.el-dropdown-link
  i
    font-size: 40px
    color: #069
</style>